<!-- Horizontal Form -->
<div class="box box-info">
    <div class="box-header with-border">
        <h3 class="box-title">添加菜单</h3>
    </div>
    <!-- /.box-header -->
    <!-- form start -->
    <form class="form-horizontal">
        <div class="box-body">
            <div class="form-group">
                <label for="nameId" class="col-sm-2 control-label">类型</label>
                <div class="col-sm-10 typeRadio">
                    <label class="radio-inline">
                        <input type="radio" name="typeId" value="1" checked> 菜单 </label>
                    <label class="radio-inline">
                        <input type="radio" name="typeId" value="2"> 按钮 </label>
                </div>
            </div>
            <div class="form-group">
                <label for="nameId" class="col-sm-2 control-label">菜单名称</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control" id="nameId" placeholder="名称">
                </div>
            </div>
            <div class="form-group">
                <label for="parentId" class="col-sm-2 control-label">上级菜单</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control load-sys-menu" readonly="readonly" id="parentId"
                           placeholder="上级菜单">
                </div>
            </div>
            <div class="form-group">
                <label for="urlId" class="col-sm-2 control-label">菜单URL</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control" id="urlId" placeholder="url">
                </div>
            </div>
            <div class="form-group">
                <label for="permissionId" class="col-sm-2 control-label">授权标识：</label>
                <div class="col-sm-10">
                    <input type="text" id="permissionId"
                           placeholder="多个用逗号分隔，如：user:list,user:create"
                           class="form-control">
                </div>
            </div>
            <div class="form-group">
                <label for="sortId" class="col-sm-2 control-label">排序号：</label>
                <div class="col-sm-10">
                    <input type="text" id="sortId" placeholder="排序号"
                           class="form-control">
                </div>
            </div>
        </div>
        <!-- /.box-body -->
        <div class="box-footer">
            <button type="button" class="btn btn-default btn-cancel">Cancel</button>
            <button type="button" class="btn btn-info pull-right btn-save">Save</button>
        </div>
        <!-- /.box-footer -->
    </form>
    <!-- zTree 对应的div -->
    <div class="layui-layer layui-layer-page layui-layer-molv layer-anim" id="menuLayer" type="page" times="2"
         showtime="0" contype="object"
         style="z-index:59891016; width: 300px; height: 450px; top: 100px; left: 500px; display:none">
        <div class="layui-layer-title" style="cursor: move;">选择菜单</div>
        <div class="layui-layer-content" style="height: 358px;">
            <div style="padding: 10px;" class="layui-layer-wrap">
                <ul id="menuTree" class="ztree"></ul>    <!-- 动态加载树 -->
            </div>
        </div>
        <span class="layui-layer-setwin"> <a
                class="layui-layer-ico layui-layer-close layui-layer-close1 btn-cancel"></a></span>
        <div class="layui-layer-btn layui-layer-btn-">
            <a class="layui-layer-btn0 btn-confirm">确定</a>
            <a class="layui-layer-btn1 btn-cancel">取消</a>
        </div>
    </div>
</div>
<script type="text/javascript" src="bower_components/ztree/jquery.ztree.all.min.js"></script>
<script type="text/javascript" src="bower_components/layer/layer.js">
</script>
<script type="text/javascript">

    var zTree;
    var setting = {
        data: {
            simpleData: {
                enable: true,
                idKey: "id",
                pIdKey: "parentId",
                rootPId: 0
            }
        }
    };

    $(function () {
        $(".load-sys-menu").click(function () {
            doLoadZTreeNodes()
        });
    })

    function doLoadZTreeNodes() {
        let url = "/menu/doFindZtreeMenuNodes";
        $.getJSON(url, function (result) {
            zTree = $.fn.zTree.init($("#menuTree"), setting, result.data);
            $("#menuLayer").css("display", "block");//block表示要显示
        })
    }

</script>
    
    
    
    
    
    
    
    
    